<template>
	<view class="details" @touchmove.stop.prevent="() => {}">
		<!-- <baseHead :title="title" bg="transparent" color="#ffffff" :showRightIcon="true" :IconName="'share-fill'"
			@clickRightIcon="clickRightIcon()" :textrightcolor="'#FFFFFF' ">
		</baseHead> -->
		<view class="content_cover" id="content_cover" :style="{'margin-top':statusBarH+'px'}">
			<!-- 返回和分享按钮 -->
			<cover-view class="tubiao">
				<cover-view>
					<cover-image src="/static/image/packageD/zuojiantou.png" style="width: 48rpx;height: 48rpx;"
						@click="clickReturn"></cover-image>
				</cover-view>
				<!-- 				<cover-view>
					<cover-image src="/static/image/packageD/fenxiang.png" style="width: 48rpx;height: 48rpx"
						@click="clickShare"></cover-image>
				</cover-view> -->
			</cover-view>
			<!-- 封面图  isShow控制显示视频还是图片  第一次进来默认显示封面图-->
			<view class="img_box">
				<image :src="URL+CourseIntroduction.Cover" v-if="isShow"></image>


			</view>
			<!-- 视频  -->
			<view v-if="!isShow" class="video_box">
				<video controls :poster="URL+CourseIntroduction.Cover" objectFit="cover" class="video"
					:id="`myVideo${viedeoIndex}`" :title="'哈哈哈'" :src="CourseIntroduction.videoPath" @ended="ended"
					@fullscreenchange="fullscreenchange"></video>

				<cover-view :class="show ? 'tankuang':'tankuang1'">
					本章节已结束~ 请点击下面章节继续播放
				</cover-view>

				<!-- 	<view class="tankuang">
					<text>本章节也结束~ 请点击下面章节继续播放</text>
				</view> -->

			</view>

			<view class="title_box">
				<view class="title">{{CourseIntroduction.Title}}</view>
				<view class="two_box">
					<view>
						<span class="qianzhui">导师：</span>
						<span class="daoshi">{{CourseIntroduction.Mentor}}</span>
					</view>
					<view>
						<span class="qianzhui">课时：</span>
						<span class="daoshi">{{CourseIntroduction.PeriodCount}}节</span>
					</view>

				</view>
				<view class="three_box">
					<view class="Price">
						<span class="fuhao">￥</span>
						<span class="zhengshu">{{Price(CourseIntroduction.Price)}}</span>
						<span class="dian">.</span>
						<span class="xiaoshu">{{Price1(CourseIntroduction.Price)}}</span>
					</view>
					<view>{{CourseIntroduction.PayCount}}人已购买</view>
				</view>
			</view>
		</view>
		<view class="content" id="content" :style="{'width':windowWidth +'px'}">

			<view class="tab_box" id="tab_box">
				<u-tabs :list="list1" @click="clickTabs" :current="typeNumber"
					:itemStyle="{ height: '90rpx',width:'60px' }" :lineColor="'#3476FE'">
				</u-tabs>

			</view>
			<!-- 下部分 -->
			<view id="scroll">
				<scroll-view scroll-y
					:style="{'height':windowHeight - statusBarH - content_coverH   - contentH	 - content_but +'px'}"
					@scrolltolower="scrolltolower" style=" padding-bottom:20rpx ;box-sizing: border-box;">

					<!-- 课程介绍 -->
					<view class="xiangqing_box" v-if="typeNumber==0">
						<view v-if="CourseIntroduction.Particulars" v-html="CourseIntroduction.Particulars">
						</view>

						<view class="wupinglun" v-else>
							<image src="/static/recruit/index/qsy.png" class="imgg"></image>
							<view>暂时没有数据~</view>
						</view>

					</view>
					<!-- 目录 -->
					<view v-else-if="typeNumber==1" style="padding: 30rpx;">
						<catalogue :ArrayData.sync="list" @PlayVideo="PlayVideo"
							v-if="list[0]&& list[0].PeriodList.length>0" />
					</view>
					<!-- 评论 -->
					<view v-else>
						<view>
							<view class="pinglun_box" v-if="!isShow">
								<view class="pinglun" :style="{'background-image':`url(${URL}${myCover})`}"></view>
								<u-search placeholder="说点什么呢..." :showAction="false" :searchIconSize="0"
									:disabled="false" @click="clickSearchP" @focus="clickSearchP"></u-search>
							</view>
							<view v-for="(item,key) in messageList">
								<messageItem :message="item" :key="key" />
							</view>
							<view class="wupinglun" v-if="messageList.length==0 ">
								<image src="/static/image/packageD/zanwupinglun.png"></image>
								<view>此课程暂时没有评论哦~</view>
							</view>
						</view>
					</view>
				</scroll-view>

			</view>
		</view>
		<!-- 下方按钮 -->
		<view class="content_but" id="content_but">
			<view class="but_box">
				<view class="left_box" @click="clickCollect">
					<image class="img" v-if="CourseIntroduction.IsCollection" src="/static/image/index/gxqxq1.png">
					</image>
					<image class="img" v-else src="/static/image/index/gxqxq2.png"></image>
					<view>收藏</view>
				</view>
				<view class="right_box" @click="goPay()" v-if="!CourseIntroduction.IsPay">立即购买</view>
				<view class="right_box" @click="download()" v-if="index==2 && CourseIntroduction.IsPay">下载</view>
			</view>
		</view>
		<u-modal :show="showModal" :content='content' :confirmText="'去购买'" :showCancelButton="true" :cancelText="'取消'"
			style="text-align: center;" @cancel="cancel" @confirm="confirm"></u-modal> 

		<view class="popup_box">
			<u-popup :show="showPopup" @close="close" @open="open" mode="center" :round="10"
				:safeAreaInsetBottom="false">
				<view class="upopup">
					<view style="text-align: center;">发表评论</view>
					<view class="upopupnr">
						<u--textarea v-model="comment.Content" count :maxlength="200"></u--textarea>
					</view>
					<view class="pingfen_box">
						<view style="display: flex;">
							<span>评分：</span>
							<u-rate active-color="#FFBC00" inactive-color=" #EEEEEE" gutter="4"
								v-model="comment.Grade"></u-rate>
						</view>
						<view>
							<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
								<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1"
									:key="index" :label="item.name" :name="item.name">
								</u-checkbox>
							</u-checkbox-group>
						</view>
					</view>
					<view class="but">
						<view class="quxiao" @click="close">
							取消
						</view>
						<view class="queren" @click="querenpinglun">
							确认
						</view>

					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import baseHead from "@/pages/component/baseHead.vue";
	// 目录
	import catalogue from '@/pages/views/packageD/template/catalogue.vue'
	import messageItem from '@/pages/views/packageD/template/messageItem.vue'
	export default {
		data() {
			return {
				URL: this.$config.domain.staticUrl,
				title: '',
				list: [],
				PageIndex: 1,
				PageSize: 10,
				CourseVideoId: '',
				UserId: "",
				Total: 0,
				messageList: [],
				CourseId: '', //课程ID
				CourseIntroduction: {}, //课程介绍
				list1: [{
						id: 0,
						name: "课程介绍",
					},
					{
						id: 1,
						name: "目录",
					},
					{
						id: 2,
						name: "评论",
					},

				],
				typeNumber: 0,
				statusBarH: '', //状态栏高度
				windowHeight: '', //窗口高度
				windowWidth: '', //窗口宽度
				contentH: '',
				content_coverH: '',
				content_but: '',
				isShow: true, //显示图片还是视频
				videoContext: "", //视频
				showModal: false, //模态框
				content: '该课程需要购买',
				myCover: '', //本账户头像
				showPopup: false, //显示弹出层
				checkboxValue1: [],
				// 基本案列数据
				checkboxList1: [{
					name: '匿名',
					disabled: false
				}],
				comment: {
					CourseId: 0, //课程Id
					CourseVideoId: 0, //课时Id
					Content: "", //内容
					Grade: 0, //评分
					IsAnonymous: false, //是否匿名
				},
				index: null, //判断是从那个分类进来的
				pageUrl: "", //当前页面路径
				videoList: [], //视频数据,
				viedeoIndex: 0, //第几个视频
				viedeoKey: null, //list数组的第几个
				show: false, //视频播放完 弹框显示隐藏
				endVideoShow: false, //记录是否在视频结束时
				status: 'loadmore', //数据加载

			};
		},
		components: {
			catalogue,
			messageItem,
			baseHead
		},
		onLoad(o) {
			const app = getApp()
			this.UserId = app.globalData.user.UserId
			if (o) {
				this.CourseId = o.id
				this.index = o.index
			}
			this.detailsData()
			// this.directoryData()
			// let pages = getCurrentPages(); //当前页
			// let beforePage = (pages[pages.length - 1]).route; //上一个页面
			// this.pageUrl = beforePage + `?${Object.keys(o)[0]}=${o.id}&${Object.keys(o)[1]}=${o.index}`

		},
		created() {
			const app = getApp()
			this.statusBarH = app.globalData.statusBarH //状态栏高度
			this.windowHeight = app.globalData.phoneInformation.windowHeight //屏幕高度
			this.windowWidth = app.globalData.phoneInformation.windowWidth
			this.myCover = app.globalData.user.HeadIcon


			this.$nextTick(() => {
				uni.createSelectorQuery().in(this).select('#content_cover').boundingClientRect(data => {
					this.content_coverH = data.height
					console.log(data.height);
				}).exec();
				uni.createSelectorQuery().in(this).select('#content_but').boundingClientRect(data => {
					this.content_but = data.height
					// console.log(data.height);
				}).exec();

				uni.createSelectorQuery().in(this).select('#tab_box').boundingClientRect(data => {
					this.contentH = data.height
					// console.log(data.height);
				}).exec();
			})
			// this.videoContext = uni.createVideoContext('myVideo'+this.videoList[this.viedeoIndex] , this)
		},
		methods: {
			// viedeo 全屏适配
			// 使用手机系统orientation的方式修复异常。
			fullscreenchange(e) {
				console.log(e, "fullscreenchange");
				// #ifdef APP-PLUS
				if (e.detail.direction == 'horizontal' && e.detail.fullScreen) {
					plus.screen.lockOrientation('landscape-primary')
				} else {
					plus.screen.lockOrientation('portrait-primary')
				}
				// #endif
			},
			toJSON() {
				// 防止APP播放视频的时候报错
				// 属性或方法“toJSON”未在实例上定义，但在呈现过程中被引用。通过初始化属性，确保此属性是被动的，无论是在data选项中，还是对于基于类的组件。
				//参见：https://vuejs.org/v2/guide/reactivity.html声明-反应特性
			},
			// 价格格式调整
			Price(e) {
				let num = Math.floor(e)
				if (num >= 0) {
					return num
				} else {
					return e
				}
			},
			Price1(e) {
				let afterNum = (e % 1).toFixed(2).substring(2)
				if (afterNum >= 0) {
					return afterNum
				}
			},
			// 滚动加载数据
			scrolltolower() {
				// 加载前值为loadmore，加载中为loading，没有数据为nomore
				if (this.status != "nomore") {
					this.status = "loading";
					this.educationComment();
				}
			},
			// 评论数据
			educationComment() {
				this.$http.digitalize.educationComment({
					CourseId: this.CourseId,
					PageIndex: this.PageIndex,
					PageSize: this.PageSize

				}).then(res => {
					if (res.Success) {
						if (res.Result.Items.length == 0) {
							// 没有数据----
							this.status = "nomore";
							return;
						}
						this.messageList = this.messageList.concat(res.Result.Items);
						if (res.Result.Items.length >= this.PageSize) {
							this.PageIndex++;
							// 表示还有数据
						} else {
							//没有更多数据了
							this.status = "nomore";
						}
					}
				})
			},
			// 详情数据
			detailsData() {
				if (this.index == 0) {
					this.$http.digitalize.online_detail({
						id: this.CourseId
					}).then(res => {
						if (res.Success) {
							this.CourseIntroduction = res.Result
							this.CourseIntroduction.OrderType = 2
						}
					});
				} else if (this.index == 2) {
					this.$http.digitalize.document_detail({
						id: this.CourseId
					}).then(res => {
						if (res.Success) {
							this.CourseIntroduction = res.Result
							this.CourseIntroduction.OrderType = 2
						}
					})
				}


			},
			// 课程目录
			directoryData() {
				this.$http.digitalize.online_directory({
					id: this.CourseId
				}).then(res => {
					if (res.Success) {
						this.list = res.Result
						// let arr = res.Result.map(item => {
						// 	return item.PeriodList.map(ite => {
						// 		return {
						// 			...ite,
						// 			OrderType: 2
						// 		}

						// 	})
						// })
						// this.list.forEach(item => {
						// 	arr.forEach(itt => {
						// 		item.PeriodList = itt
						// 	})
						// })

					}
				})
			},
			// 点击标签切换
			clickTabs(e) {
				if (this.typeNumber == e.id) return
				this.typeNumber = e.id
				if (this.typeNumber == 1) {
					this.directoryData()
				} else if (this.typeNumber == 2) {
					this.educationComment()
				}
			},
			//点击收藏
			clickCollect() {
				if (this.CourseIntroduction.IsCollection) {
					let Id = {
						courseId: Number(this.CourseId),
					}
					this.$http.digitalize.uncollection(Number(this.CourseId)).then(res => {
						if (res.Success) {
							this.$util.toast("取消收藏")
							this.CourseIntroduction.IsCollection = false
						} else {
							this.$util.toast("取消收藏失败")
						}
					})
				} else {
					let Id = {
						CourseId: this.CourseId,
						Title: this.CourseIntroduction.Title
					}
					this.$http.digitalize.collection(Id).then(res => {
						if (res.Success) {
							this.$util.toast("收藏成功")
							this.CourseIntroduction.IsCollection = true
						} else {
							this.$util.toast("收藏失败")
						}
					})
				}
			},
			// 立即购买
			goPay() {
				let obj = {
					Id: this.CourseIntroduction.Id,
					Title: this.CourseIntroduction.Title,
					OrderType: this.CourseIntroduction.OrderType,
					Price: this.CourseIntroduction.Price,
					Type: this.CourseIntroduction.Type,
					Code:this.CourseIntroduction.Code//用于苹果支付
				}
				uni.navigateTo({
					url: "/pages/views/packageD/type-jobhunting/payment/index?tcid=" + JSON.stringify(obj)
				})
			},
			// 下载
			download() {
				// uni.downloadFile({
				// 	url: this.URL + this.CourseIntroduction.Path, //文件的下载路径
				// 	success(res) {
				// 		console.log(res);
				// 		//   //保存到本地
				// 		uni.saveFile({
				// 			tempFilePath: res.tempFilePath, //文件的临时路径
				// 			success: function(res) {
				// 				console.log("111", res);
				// 				const savedFilePath = res.savedFilePath;
				// 				// 打开文件
				// 				uni.openDocument({
				// 					filePath: savedFilePath,
				// 					success: function(res) {
				// 						uni.hideLoading();
				// 					},
				// 					fail: function(res) {},
				// 					complete: function(res) {
				// 						setTimeout(uni.hideLoading(), 4000);
				// 					},
				// 				});
				// 			},
				// 			fail: function(err) {},
				// 		});
				// 	},
				// 	fail(res) {},
				// });

				const id = this.CourseIntroduction.CourseId
				const url = this.URL + this.CourseIntroduction.Path
				// #ifdef APP-PLUS
				// let files = uni.getStorageSync('files') ? JSON.parse(uni.getStorageSync('files')) : {}
				// if (files[id]) { // 已下载的文件直接打开
				// 	plus.runtime.openFile(files[id], {}, (res) => {
				// 		console.log('文件不存在')
				// 		downloadFile()
				// 	})
				// } else {
					downloadFile()
				// }

				function downloadFile() {
					const dtask = plus.downloader.createDownload(url, {}, function(d, status) {
						if (status == 200) {
							console.log('保存成功')
							//下载成功,d.filename是文件在保存在本地的相对路径，使用下面的API可转为平台绝对路径
							//const fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
							console.log(d.filename);
							plus.runtime.openFile(d.filename); //选择软件打开文件
							files[id] = d.filename
							uni.setStorageSync('files', JSON.stringify(files))
						} else {
							//下载失败
							plus.downloader.clear(); //清除下载任务
						}
					});
					dtask.start();
				}
				// #endif

				// #ifdef H5
				window.open(url)
				// #endif


			},
			// 点击返回按钮
			clickReturn() {
				uni.navigateBack()
			},
			// 点击分享
			clickShare() {
				// console.log("分享");
				// var msg = {
				// 	type: 'web',
				// 	content: this.CourseIntroduction.Title, // pictures 参数为数组  注意图片路径要是本地路径 base64也可以
				// 	href: this.URL+ this.pageUrl,
				// 	type: 'image',
				// 	pictures: [this.URL+this.CourseIntroduction.Cover]
				// };
				// console.log(msg);
				// plus.share.sendWithSystem(msg, function() {
				// 	console.log('分享成功');
				// });

			},
			// 点击播放
			PlayVideo(item, item2, index, key) {
				console.log(item, item2, index, key);

				console.log(this.show, "3333");
				console.log(this.viedeoIndex);
				if (!item2.IsLock) {
					if (item2.Path) {
						this.videoList = item
						this.viedeoIndex = index
						this.viedeoKey = key
						this.$nextTick(() => {
							this.show = false
						})
						this.videoList = item
						this.isShow = false
						this.CourseIntroduction.Cover = item2.Cover
						this.CourseIntroduction.videoPath = this.URL + item2.Path
						this.comment.CourseVideoId = item2.Id
						this.$nextTick(() => {
							this.paly()
						})
					}
				} else {
					console.log("被锁住");
					this.showModal = true
					this.pause()
				}

			},
			//视频播放结束
			ended() {
				console.log(this.videoList);
				console.log("自动播放完毕");
				// let ks = ''
				// ks = this.videoList.findIndex(item => item.Id == this.comment.CourseVideoId)
				// if (ks < this.videoList.length - 1) {
				// 	console.log(ks, this.videoList[ks + 1]);
				// 	this.CourseIntroduction.videoPath = this.URL + this.videoList[ks + 1].Path
				// 	this.comment.CourseVideoId = this.videoList[ks + 1].Id
				// 	this.$nextTick(() => {
				// 		this.paly()
				// 	})

				// }
				console.log(this.viedeoIndex);

				if (this.viedeoIndex !== this.videoList.length - 1) {
					if (this.viedeoIndex < this.videoList.length) {
						console.log("1111");
						this.viedeoIndex++;
						if (!this.videoList[this.viedeoIndex].IsLock) {
							this.isShow = false
							this.CourseIntroduction.Cover = this.videoList[this.viedeoIndex].Cover
							this.CourseIntroduction.videoPath = this.URL + this.videoList[this.viedeoIndex].Path
							this.comment.CourseVideoId = this.videoList[this.viedeoIndex].Id
							this.$nextTick(() => {
								setTimeout(() => {
									this.paly()
								}, 500)
							})

							this.list[this.viedeoKey].PeriodList[this.viedeoIndex - 1].check = false
							this.list[this.viedeoKey].PeriodList[this.viedeoIndex].check = true
						} else {
							this.showModal = true
							this.endVideoShow = true
							// this.CourseIntroduction.Cover = this.videoList[this.viedeoIndex].Cover
							// this.isShow=true
							// console.log(this.CourseIntroduction.Cover);
							this.pause()
						}

						console.log(this.list);
					} else {
						this.pause()
					}
				} else {
					this.show = true
				}

			},
			//播放当前视频播放
			paly() {
				//nvue使用createVideoContext要指代this     使用Id查找
				uni.createVideoContext('myVideo' + (this.viedeoIndex), this).play() //当前播放
			},
			// 暂停视频
			pause() {
				uni.createVideoContext('myVideo' + (this.viedeoIndex), this).pause()
			},
			// 点击模态框的取消
			cancel() {
				console.log(this.viedeoKey);
				console.log(this.videoList);
				console.log(uni.createVideoContext('myVideo' + (this.viedeoIndex), this));
				if (this.endVideoShow) {
					this.showModal = false
					console.log("5555");
				} else {
					console.log("6666");
					this.showModal = false
					this.paly()
				}

			},
			// 点击模态框的确定
			confirm() {
				uni.navigateTo({
					url: "/pages/views/packageD/type-jobhunting/payment/index?tcid=" + JSON.stringify(this
						.CourseIntroduction)
				})
				this.showModal = false
			},
			// 点击评论里 的评论
			clickSearchP() {
				// if (this.CourseIntroduction.IsPay) {
				// 	this.open()
				// } else {
				// 	this.$util.toast("该课程为付费课程，请先购买在评论哦~")
				// }
				this.open()

			},
			// 打开弹出层
			open() {
				// console.log('open');
				this.showPopup = true
			},
			// 关闭弹出层
			close() {
				this.showPopup = false
				// console.log('close');
			},
			// 选择是否匿名
			checkboxChange(n) {
				console.log('change', n);
				if (n) {
					this.comment.IsAnonymous = true
				} else {
					this.comment.IsAnonymous = false
				}
			},
			// 确认评论
			querenpinglun() {
				this.comment.CourseId = this.CourseId
				console.log(this.comment);
				this.$http.digitalize.cr_comment(this.comment).then(res => {
					if (res.Success) {
						this.$util.toast("评论成功")
						this.close()
						this.educationComment()
					}
				})
			}
		},

	}
</script>

<style lang="scss">
	.details {
		.content_cover {
			background-color: #fff;
			position: relative;

			.img_box {
				image {
					height: 420rpx;
					width: 100%;
				}


			}

			.video_box {
				position: relative;

				.video {
					width: 100%;
					height: 420rpx;
				}

				.tankuang {
					padding: 40rpx 30rpx;
					width: 600rpx;
					height: 150rpx;
					position: absolute;
					top: 17%;
					left: 7%;
					background-color: #fff;
					border-radius: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #000000;


				}

				.tankuang1 {
					padding: 40rpx 30rpx;
					width: 600rpx;
					height: 150rpx;
					position: absolute;
					top: 17%;
					left: 7%;
					background-color: transparent;
					border-radius: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: transparent;


				}

			}

			.tubiao {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-direction: row;
				position: fixed;
				z-index: 99999;
				padding: 20rpx 40rpx;
				right: 0;
				left: 0;
			}

			.title_box {
				padding: 30rpx;

				.title {
					font-size: 36rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #000000;
					height: 96rpx;
				}

				.two_box {
					display: flex;
					align-items: center;
					padding: 20rpx 0;

					.qianzhui {
						font-size: 28rpx;
						color: #999999;
						font-family: PingFang SC-Regular;
					}

					.daoshi {
						font-size: 28rpx;
						color: #000000;
						font-family: PingFang SC-Regular;
						margin-right: 147rpx;
					}
				}

				.three_box {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: flex-end;

					.Price {
						font-family: PingFang SC-Bold;
						color: #F35370;

						.fuhao {
							font-size: 26rpx;
							font-weight: bold;
						}

						.zhengshu {
							font-size: 38rpx;
							font-weight: bold;
						}

						.dian {
							font-size: 42rpx;
						}

						.xiaoshu {
							font-size: 26rpx;
						}
					}
				}
			}
		}

		.content {
			margin-top: 20rpx;
			background-color: #fff;
			box-sizing: border-box;

			.tab_box {
				background-color: #ffffff;
				// position: fixed;
				z-index: 999;
				display: flex;
				justify-content: center;
				align-items: center;
				// height: 88rpx;
				border-bottom: 1rpx solid rgba(112, 112, 112, 0.12);
			}

			.xiangqing_box {
				padding: 30rpx 30rpx 0;
			}

			.pinglun_box {
				display: flex;
				align-items: center;
				padding: 20rpx 24rpx;

				.pinglun {
					border-top-left-radius: 12rpx;
					border-top-right-radius: 12rpx;
					// background-position: center;
					background-repeat: no-repeat;
					background-size: 100%;
					width: 40rpx;
					height: 40rpx;
					overflow: hidden;
					margin-right: 20rpx;
				}
			}

			.wupinglun {
				padding: 100rpx 0;
				text-align: center;


				.imgg {
					width: 200rpx;
					height: 160rpx;
				}

				image {
					width: 191rpx;
					height: 134rpx;
				}

				view {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #BBBCBD;
					padding-top: 40rpx;
				}
			}
		}

		.content_but {
			padding: 50rpx 0rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			// height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			box-sizing: border-box;
			// border: 1px solid blue;

			.but_box {
				display: flex;
				justify-content: space-between;
				align-items: center;


				.left_box {
					display: flex;
					align-items: center;
					justify-content: center;
					background: #F7F8FA;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					opacity: 1;
					width: 210rpx;
					height: 88rpx;
					margin-right: 20rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 400;
					color: #5C5C5C;

					image {
						width: 34rpx;
						height: 31rpx;
						margin-right: 12rpx;
					}
				}

				.right_box {
					display: flex;
					align-items: center;
					justify-content: center;
					background: #3476FE;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					opacity: 1;
					font-size: 30rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					width: 440rpx;
					height: 88rpx;
				}
			}
		}


	}

	.popup_box {
		.upopup {
			padding: 40rpx 30rpx 0rpx 30rpx;
			width: 600rpx;
			// border: 1px solid red;

			.upopupnr {
				padding: 30rpx 1rpx;
				// height: 200rpx;
				overflow-y: auto;
				display: flex;
				justify-content: center;
				align-items: center;

				.upopupnrtext {
					font-size: 34rpx;
					text-align: center;
				}


			}

			.pingfen_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 30rpx 0rpx;
			}

			.but {
				display: flex;
				justify-content: space-between;
				border-top: 1rpx solid #E7E7E8;

				.quxiao {
					width: 50%;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					padding: 32rpx 0;
					text-align: center;
					border-right: 1rpx solid #E7E7E8;
				}

				.queren {
					width: 50%;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #3476FE;
					text-align: center;
					padding: 32rpx 0;
				}

			}
		}


	}
</style>